<template>
  <div class="app-container">
    <el-card class="pag-container">
      <el-row>
          <el-col :span="14" :align="'left'">
              <span style="font-size: 16px;font-weight: 600;">{{ param.companyName }}</span>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="8" class="marginTop20"> <Carousel v-bind="swiperData" ></Carousel></el-col>
          <el-col :offset="1" :span="14">
              <el-row>
                  <el-col :span="24">
                      <span style="font-size: 22px;font-weight: bold;">{{param.carryCityName}} / {{param.carryCountryName}}</span>
                  </el-col>
              </el-row>
              <el-row align="middle" class="marginTop20">
                <el-col :span="4" class="marginTop10">预计提箱日期</el-col><el-col :span="18" class="marginTop10" >{{ formatDate(param.planPickupDate,2) || '--'}}</el-col>
                <el-col :span="4" class="marginTop10" v-if="param.productionDateStart">生产日期</el-col><el-col v-if="param.productionDateStart" :span="18" class="marginTop10" >
                    <span v-if="param.productionDateStart">{{ formatDate(param.productionDateStart, 3) }}年</span>
                    &nbsp;~&nbsp;
                    <span v-if="param.productionDateEnd">{{ formatDate(param.productionDateEnd, 3) }}年</span>
                </el-col>
                <el-col :span="4" class="marginTop10">发票类型</el-col><el-col :span="18" class="marginTop10">{{checkInvoiceType(param.invoiceType)}}</el-col>
                <el-col :span="4" class="marginTop10">可结算币种</el-col><el-col :span="18" class="marginTop10" >{{ param.payCurrencyStr }}</el-col>
                <el-col :span="4" class="marginTop10">发布人</el-col><el-col :span="18" class="marginTop10" >{{ param.publisherName }}</el-col>
                </el-row>
          </el-col>
      </el-row>
    </el-card>

    <el-card class="pag-container">
      <div class="_before">规格信息</div>
       <div class="table">
              <div class="table-top">
                <div class="table-title">箱型</div>
                <div class="table-title">箱况</div>
                <div class="table-title">币种</div>
                <div class="table-title">单价</div>
                <div class="table-title">箱标</div>
                <div class="table-title">数量</div>
              </div>
              <div class="tatle-for" v-for="(item, index) in param.releaseSalePriceList" :key="index" >
                <div class="tatle-list">{{dictList.boxTypeInfo1[item.boxCondition]}}</div>
                  <div class="tatle-list">{{dictList.boxConditionInfo3[item.boxCondition]}}</div>                
                  <div class="tatle-list">{{item.currency=='CNY' ? '人民币(CNY)':'美元(USD)'}}</div>
                  <div class="tatle-list">{{item.currency=='CNY' ? '￥':'$' }}{{item.unitPrice }}</div>
                  <div class="tatle-list">  {{ item.totalWeight }} </div>
                  <div class="tatle-list">  {{ item.inventory }} </div>
              </div>
            </div>
    </el-card>
    <el-card class="pag-container">
      <div class="_before">图文描述</div>
      <div v-for="(item,index0) in param.detailFileList" style="width:100%;" :key="index0">
        <div v-for="(img,index1) in item.imgInfo" style="width:100%;max-height:300px;overflow: hidden;" :key="index1">
          <img :src="img.url" style="width:100%;height:auto;margin-top: 10px" />
        </div>
        <div style="box-sizing: border-box;padding: 10px;">{{ item.textVal }}</div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { formatDate } from '@/utils'
import  Carousel from '@/components/carousel'
import { onActivated, reactive, ref ,computed} from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { getReleaseSalesInfo } from '@/api/boxDeal/boxSeel'
import useUserStore from '@/store/modules/user'
import dictList from '@/utils/dictList'
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const param = ref({
  invoiceType:''
})

onActivated(async() => {
  getSetBoxInfo()
})

const getSetBoxInfo = async () => {
  if(!route.query.boxId) return

    await getReleaseSalesInfo(route.query.boxId).then(res => {
    param.value = res.data
    param.value.payCurrencyStr = checkPayCurrency(res.data.payCurrency)
    param.value.detailFileList = JSON.parse(res.data.detailFileList)
    swiperData.list= JSON.parse(res.data.mainFileList)
    })
}
const swiperData = reactive({  // 轮播图数据
  list: [],
  config: {
    width:"100%",
    height:"450px"
  }
})

const checkPayCurrency = (val:string)=>{
    switch (val) {
        case 'USD':
            return '美元（USD）'
        case 'CNY':
            return '人民币（CNY）'
        case 'USD,CNY':
            return '美元、人民币'
        case 'CNY,USD':
            return '人民币、美元'
        default:
            return '--'
    }

}
const checkInvoiceType =  (val:string) => {
  // 5-增值税普通发票  10-增值税专用发票 15-形式发票
  let varArr = val.split(',')
  varArr.forEach((item:string,index) => {
    if(item == "5"){
      varArr[index] = "增值税普通发票"
    }else if(item == "10"){
      varArr[index] = "增值税专用发票"
    }else if(item == "15"){
      varArr[index] = "形式发票"
    }
  })
  return varArr.join('/')
}

</script>
<style lang="scss" scoped>
  .pag-container {
    margin-top: 20px;
    box-sizing: border-box;
    padding: 10px;
  }
  .boxMsg{
    position: relative;
    width: 200px;
    height: 20px;
    line-height: 20px;
    padding-left: 10px;
    font-weight: 700;
    font-size: 16px;
  }
  .boxMsg:before{
    content: ''; /* 必须有内容，否则伪元素不会显示 */
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 20px;
    background-color: #ff7f50;
  }
  tr > td:first-child{
    width: 25%;
    text-align: justify;
    text-align-last: justify;
    padding-right: 10px;
  }
  

  .table{
  width: 100%;
  margin-top:20px ;
}
.table-top{
  display: flex;
  padding: 10px 0;
background: #f8f8f8;
}
.table-title{
  width: 20%;
  text-align: center;
}
.tatle-for{
  display: flex;
   margin: 5px 0;
  padding: 10px 0;
}
.tatle-list{
  width: 20%;
  text-align: center;
}
</style>